<template>
  <div class="home">
    <ArticleList
      :url="articleListUrl"
      :key="articleListUrl"
      @pageChanged="handlePageChanged"
      :currentPage="currentArticlePage"
    ></ArticleList>
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList.vue';

export default {
  name: 'Home',
  components: {
    ArticleList,
  },
  data() {
    return {
      articleListUrl: 'articles/',
      currentArticlePage: 1,
    };
  },
  mounted() {
    if (this.$store.state.firstVisit) {
      const h = this.$createElement;
      this.$alert('<strong style="color:red;font-size:2em;">注意：</strong>在这里，每天都是 <strong style="color:red;font-size:3em;">愚人节</strong>哦 <p style="margin-top:1em;">请不要相信此处的任何信息</p>','',{
        dangerouslyUseHTMLString: true
      })
      this.$store.commit("setFirstVisit", false)
    }
  },
  beforeDestroy() {
    this.$message.closeAll();
  },
  methods: {
    handlePageChanged(currentPage) {
      const pos = this.articleListUrl.search('[Pp][Aa][Gg][Ee]');
      const questionPos = this.articleListUrl.indexOf('?');
      const joinChar = questionPos == -1 ? '?' : '&';
      if (pos == -1) {
        this.articleListUrl += `${joinChar}page=${currentPage}`;
      } else {
        const regex = /(page=)\d+/;
        this.articleListUrl = this.articleListUrl.replace(
          regex,
          `$1${currentPage}`,
        );
      }
      this.currentArticlePage = currentPage;
    },
  },
};
</script>
